<template>
	<scroll-view class="container" scroll-y="true" @scroll="pageScroll">
		<view class="title-contents" :class="headerActive?'act':''">
			<!--  #ifdef APP-PLUS -->
			<view class="top-view status" style="background: rgba(255,255,255,0)"></view>
			<!--  #endif -->
			<view class="_top titles">
				<view class="titleLeftButton" @click="back()"><text class="iconfont icon-fanhui"></text></view>
				<view class="titleText">
					<view class="title-item active">商品</view>
					<view class="title-item">详情</view>
					<view class="title-item">评论</view>
				</view>
				<view @click="tiao"  class="titleRightButton"><text class="iconfont icon-gouwuche2"></text></view>
			</view>
		</view>
		<view class="firstPart" id="">
			<!-- 轮播图 -->
			<view class="swiper-wrapper">
				<swiper indicator-dots="true" indicator-color="#666" indicator-active-color="#fff" autoplay="true"
					circular="true">
					<swiper-item v-for="item in detail.banner">
						<image :src="item" />
					</swiper-item>

				</swiper>
			</view>

			<view class="goods-info">
				<view class="goods-price">
					<text class="price">
						<text>￥</text>
						{{detail.price}}
					</text>
					<text class="through-price">￥{{detail.old_price}}</text>
				</view>
				<view class="goods-title">{{detail.name}}</view>
				<view class="sales">
					<text>快递:包邮</text>
					<text>月销{{detail.sales}}</text>
				</view>
			</view>
		</view>

		<view class="evaluate">
			<view class="evaluate_title">
				<view class="title_name">
					<text>评价</text>
					<text>23</text>
				</view>
				<view class="title_goto" @click="navTo(`/pages/product/comment?goods_id=${goods_id}`)">
					<text>查看更多</text>
					<text class="iconfont icon-qianwang"></text>
				</view>
			</view>
			<view class="evaluate_con">
				<view class="con_title">
					<image src="../../static/images/my/001.png" mode=""></image>
					<text class="Name">细雨迷离</text>
				</view>
				<view class="con_con">不错</view>
				<view class="con_img">
					<image src="../../static/images/home/goods1.jpg" mode=""></image>
				</view>
			</view>
		</view>

		<view class="goods-detail">
			<view class="title">
				<view class="title_name"><text>图文详情</text></view>
			</view>
			<u-parse :content="detail.desc"></u-parse>
			<!-- <view class="content"><image src="/static/images/shop/goods_banner2.jpg" mode="widthFix"></image></view> -->
		</view>
		<view class="footer">
			<view class="heart">
				<u-icon name="heart-fill" @click="togglefav" :color="is_fav==0?'#ccc':'red'" size="28"></u-icon>
				<text>收藏</text>
			</view>
			<view class="btn cart" @click="popupShow = true,type='cart'">加入购物车</view>
			<view class="btn buy" @click="getbuy">立即购买</view>
		</view>
		<!-- <view class="mask"></view> -->
		<u-popup :show="popupShow" @close="close">
			<view class="mask-content">
				<view class="header">
					<view class="title">
						<image :src="detail.img" mode=""></image>
						<view class="rit">
							<text style="color: red;">
								￥{{default_sku_info.price}}
							</text>
							<text style="color: #ccc;">{{default_sku_info.text?default_sku_info.text.join():''}}</text>
							<text style="color: #ccc;">库存{{default_sku_info.stock}}</text>
						</view>
					</view>
					<image @click="popupShow=false" src="/static/images/common/close.png" mode=""></image>
				</view>
				<view v-for="(item,index) in detail.attr">
		 		<view class="choose-title">{{item.text}}</view>
					<scroll-view class="type-view" scroll-y>
						<view class="list">
							<view class="item" :class="{active:item.selectIndex===index2}" @click="chooseAttr(index,index2)" v-for="(val,index2) in item.values">
								{{val.text}}</view>
							<!-- <view class="item ">中包</view> -->
						</view>
					</scroll-view>
				</view>

				<view class="goods-number">
					<text>数量</text>
					<number-box :min="1"  :max="999" :value="num" @change="numchang" :step="1"></number-box>
				</view>
				<view class="choose-footer" @click="addcart">确定</view>
			</view>
		</u-popup>

	</scroll-view>
</template>

<script>
	import numberBox from '../../components/numberbox/numberbox.vue';
	import {
		get_goods_detail,
		get_sku,
		add_cart,toggle_fav
	} from '@/api/index.js'
	export default {
		components: {
			numberBox
		},
		data() {
			return {
				headerActive: false,
				goods_id: '',
				detail: [],
				popupShow: false,
				default_sku_info: {},
				sku:[],
				num:1,
				type:'buy',
				is_fav:0
			};
		},
		onLoad({
			goods_id
		}) {
			this.goods_id = goods_id
			this.getDetail()
			// console.log(this.goods_id)
		},
		methods: {
			//评论与取消评论
			togglefav(){
				// goods_id	string	是	商品ID	5fd723bc23976b000128ddbc
				// uid	string	是	用户ID	
				// is_fav	string	是	是否收藏 如果当前没收藏 填写0 当前收藏的话填写1	0
				let {goods_id,is_fav} = this
				let uid = uni.getStorageSync('uid')
				toggle_fav({goods_id,is_fav,uid}).then(res=>{
					if(res.code==1){
						if(this.is_fav==0){
							this.is_fav=1
						}else{
							this.is_fav=0
						}
						// console.log(this.is_fav)
						this.$u.toast(res.msg)
					}
				})
			},
			getbuy(){
				this.popupShow = true
				this.type='buy'
			},
			tiao(){
				uni.switchTab({
					url:'/pages/cart/cart'
				})
			},
			//监控页面滚动,控制头部变色
			pageScroll(e) {
				this.headerActive = e.target.scrollTop >= 60;
			},
			getDetail() {
				let {
					goods_id
				} = this
				let uid = uni.getStorageSync('uid')
				get_goods_detail({
					goods_id,
					uid
				}).then(res => {
					// console.log(res)
					if(res.code==1){
						this.is_fav=res.is_fav
						this.detail = res.data[0]
						// console.log(this.detail)
						this.default_sku_info = this.detail.default_sku_info
					}
				})
			},
			close() {
				this.popupShow = false
				// console.log('close');
			},
			chooseAttr(index,index2){
				// console.log(index,index2)
				this.detail.attr[index].selectIndex = index2
				this.$forceUpdate()
				this.getskustyle()
			},
			//获取被选中的sku属性
			getskustyle(){
				// console.log(this.detail.attr)
				// 判断一下是否都选了
				
				let attr = this.detail.attr
				let selectSkuArr = []
				for(let i=0;i<attr.length;i++){
					// console.log(attr[i])
					if(attr[i].selectIndex===undefined||attr[i].selectIndex===null){
						//证明属性没选完
						return
					}
					selectSkuArr.push(attr[i].values[attr[i].selectIndex].text)
				}
				// console.log(selectSkuArr)
				this.sku = selectSkuArr
				this.getsku()
			},
			getsku(){
				let {goods_id,sku} = this
				get_sku({goods_id,sku}).then(res=>{
					// console.log(res)
					this.default_sku_info=res.data
					// default_sku_info.price=66
					console.log(this.default_sku_info)
				})
			},
			numchang({value}){
				this.num= value
			},
			addcart(){
				let uid = this.$store.state.uid
				let {goods_id,num,sku,type} = this
				let attr = this.detail.attr
				// let selectSkuArr = []
				for(let i=0;i<attr.length;i++){
					// console.log(attr[i])
					if(attr[i].selectIndex===undefined||attr[i].selectIndex===null){
						//证明属性没选完
						this.$u.toast('请选择规格')
						return
					}
				}
				
					add_cart({goods_id,uid,num,attr:sku,type}).then(res=>{
						console.log(res)
						if(res.code==1){
							if(type=='buy'){
								uni.navigateTo({
									url:`/pages/order/createOrder?cart_id=${res.data.id}&type=${'buy'}`
								})
							}else{
								this.$u.toast(res.msg)
								this.popupShow=false
							}
						}else{
							this.$u.toast(res.msg)
						}
					})
				
				
			}
			
		}
	};
</script>

<style scoped lang="scss">
	.heart{
		display: flex;
		width: 100px;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
	}
	.rit {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		margin-top: 10px;
		// margin-left: 10px;

		text {
			font-size: 29upx !important;
		}
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #f5f5f7;

		.container {
			background-color: #f5f5f7;
			height: 100%;

			.title-contents {
				position: fixed;
				top: 0;
				width: 100%;
				height: calc(var(--status-bar-height) + 88upx);
				z-index: 1000;
				background: rgba(255, 255, 255, 0);

				.top-view {
					width: 100%;
					height: var(--status-bar-height);
				}

				&.act {
					background: rgba(255, 255, 255, 1);
					border-bottom: 1px solid #eee;

					.titles .titleRightButton .iconfont {
						color: #fff;
					}

					.titles .titleLeftButton .iconfont {
						color: #fff;
					}

					.titles .titleText {
						opacity: 1;
					}
				}

				.titles {
					display: flex;
					flex-direction: row;
					justify-content: center;
					height: 88upx;

					.mp-titleLeftButton {
						width: 88upx;
						height: 88upx;
					}

					.titleLeftButton {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 14upx;
						width: 60upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						border-radius: 50%;
						background: rgba(0, 0, 0, 0.5);

						.iconfont {
							font-size: 16px;
							color: #fff;
						}
					}

					.titleText {
						display: flex;
						justify-content: space-around;
						align-items: center;
						width: 574upx;
						height: 88upx;
						margin: 0 auto;
						opacity: 0;

						.title-item {
							position: relative;
							height: 88upx;
							line-height: 88upx;
							font-size: 36upx;
							color: #666;

							&.active {
								color: #000;

								&::after {
									position: absolute;
									bottom: 0;
									left: 50%;
									content: ' ';
									margin-left: -25upx;
									width: 50upx;
									height: 6upx;
									background: $theme-color;
								}
							}
						}
					}

					.titleRightButton {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 14upx;
						width: 60upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						border-radius: 50%;
						background: rgba(0, 0, 0, 0.5);
						color: #fff;

						.iconfont {
							font-size: 19px;
							color: #fff;
						}
					}
				}
			}

			.firstPart {
				.swiper-wrapper {
					/*  #ifdef  MP-WEIXIN  */
					min-height: 88upx;
					/*  #endif  */
					width: 100%;
					/*  #ifndef  MP-WEIXIN  */
					min-height: calc(var(--status-bar-height) + 88upx);

					/*  #endif  */
					swiper {
						width: 100%;
						height: 750upx;

						image {
							width: 100%;
							height: 750upx;
						}
					}
				}

				.seckill {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 0 25upx;
					box-sizing: border-box;
					width: 100%;
					height: 100upx;
					background: #fb5248;

					.goods-price {
						display: flex;
						flex-direction: row;
						align-items: center;
						height: 100upx;

						.price {
							font-size: 44upx;
							color: #fff;

							text {
								font-size: 28upx;
							}
						}

						view {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							margin-left: 24upx;
							padding: 20upx 0;
							box-sizing: border-box;
							font-size: 22upx;
							color: #fff;

							.through-price {
								text-decoration: line-through;
							}
						}
					}

					.progress-wrapper {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 16upx 0 22upx;
						height: 100upx;
						box-sizing: border-box;
						font-size: 22upx;
						color: #fee900;
					}
				}

				.goods-info {
					padding: 0 25upx;
					box-sizing: border-box;
					background: #fff;
					overflow: hidden;

					.goods-price {
						line-height: 84upx;

						.price {
							font-size: 36upx;
							color: #fb5248;

							text {
								font-size: 24upx;
							}
						}

						.through-price {
							margin-left: 30upx;
							font-size: 22upx;
							color: #999;
							text-decoration: line-through;
						}
					}

					.goods-title {
						margin-top: 20upx;
						line-height: 42upx;
						font-size: 32upx;
						color: #111;
					}

					.sales {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 84upx;
						font-size: 24upx;
						color: #666;
					}
				}
			}

			.coupon {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 90upx;
				margin: 20upx 0 0;
				background-color: #fff;
				padding: 0 25upx;
				box-sizing: border-box;
				font-size: 28upx;
				color: #666;

				.title {
					text {
						&:nth-child(2n) {
							margin-left: 30upx;
							color: #111;
						}

						&:last-child {
							color: #fb5248;
						}
					}
				}

				.get-coupon {
					text {
						padding: 2upx 8upx;
						box-sizing: border-box;
						background: rgba(251, 82, 72, 0.1);
						color: #fb5248;
						border-radius: 6upx;
					}
				}
			}

			.spec {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20upx;
				height: 74upx;
				background-color: #fff;
				padding: 0 25upx;
				box-sizing: border-box;
				font-size: 28upx;
				color: #666;

				&.delivery {
					margin-top: 0;
				}

				.title {
					text {
						&:last-child {
							margin-left: 30upx;
							color: #111;
						}
					}
				}

				.arrow {
					.iconfont {
						color: #999;
						font-size: 12px;
					}
				}
			}

			.evaluate {
				margin: 20upx 0;
				padding: 0 25upx;
				box-sizing: border-box;
				background-color: #fff;

				.evaluate_title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 84upx;
					overflow: hidden;

					.title_name {
						font-size: 30upx;
						font-weight: bold;
					}

					.title_goto {
						font-size: 24upx;
						color: #666;

						.iconfont {
							margin-left: 10upx;
							font-size: 24upx;
						}
					}
				}

				.evaluate_con {
					padding-bottom: 20upx;
					box-sizing: border-box;
					font-size: 28upx;

					.con_title {
						image {
							width: 60upx;
							height: 60upx;
							border-radius: 50%;
						}

						.Name {
							display: inline-block;
							vertical-align: top;
							margin-top: 10upx;
							margin-left: 15upx;
						}
					}

					.con_img {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;
						margin-top: 20upx;

						image {
							margin-right: 20upx;
							margin-bottom: 15upx;
							width: 160upx;
							height: 160upx;
							border-radius: 5px;

							&:last-child {
								margin-right: 0;
							}
						}
					}
				}
			}

			.all-comment {
				.evaluate_list {
					background-color: #fff;
					padding: 20upx 25upx 0;
					box-sizing: border-box;

					.list_title {
						overflow: hidden;
						_zoom: 1;

						.list_left {
							image {
								width: 60upx;
								height: 60upx;
								border-radius: 50%;
							}

							.list_left_con {
								display: inline-block;
								margin-left: 10px;
								font-size: 24upx;

								.time {
									color: #999999;
									margin-top: 10upx;
								}
							}
						}
					}

					.list_text {
						font-size: 28upx;
						padding: 10px 0;
					}

					.list_img {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;

						image {
							margin-bottom: 15upx;
							width: 160upx;
							height: 160upx;
							border-radius: 5px;
							margin-right: 15upx;
						}
					}

					.list_btm {
						overflow: hidden;
						_zoom: 1;
						padding: 10px 0;

						.btm_left {
							float: left;
							font-size: 24upx;
							color: #666666;
						}

						.btm_right {
							float: right;
							font-size: 24upx;
							color: #666;

							.comment {
								width: 90upx;
								height: 40upx;
								line-height: 36upx;
								border-radius: 20upx;
								text-align: center;
								border: 1px solid #666;
								display: inline-block;
								margin-right: 10px;
							}

							.Give {
								width: 130upx;
								height: 40upx;
								line-height: 36upx;
								border-radius: 20upx;
								text-align: center;
								border: 1px solid #666;
								display: inline-block;
							}
						}
					}
				}
			}

			.goods-detail {
				margin: 0 0 94upx;
				padding: 0 25upx 100upx;
				box-sizing: border-box;
				background-color: #fff;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 84upx;
					overflow: hidden;

					.title_name {
						font-size: 30upx;
						font-weight: bold;
					}
				}

				.content {
					font-size: 0;

					image {
						width: 100%;
					}
				}
			}

			.margin-t {
				/*  #ifdef  APP-PLUS  */
				margin-top: calc(var(--status-bar-height) + 88upx);
				/*  #endif  */
				/*  #ifndef  APP-PLUS  */
				margin-top: 88upx;
				/*  #endif  */
			}

			.footer {
				position: fixed;
				bottom: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				height: 94upx;
				background: #fff;

				.btn {
					width: 50%;
					line-height: 94upx;
					text-align: center;
					background: $theme-color;
					font-size: 34upx;
					color: #fff;

					&.buy {
						background: #fb5248;
						color: #fff;
					}
				}
			}

			.mask {
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 10008;
			}

			.mask-content {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				// height: 1020upx;
				background: #fff;
				z-index: 10009;

				.header {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 0 25upx;
					box-sizing: border-box;
					height: 150upx;

					.title {
						display: flex;

						image {
							margin-top: 0;
							position: relative;
							top: -50upx;
							width: 200upx;
							height: 200upx;
							vertical-align: middle;
						}

						text {
							margin-top: -20upx;
							margin-left: 30upx;
							// color: #fb5248;
							font-size: 36upx;

							text {
								font-size: 29upx;
							}
						}
					}

					image {
						margin-top: 30upx;
						width: 40upx;
						height: 40upx;
					}
				}

				.choose-title {
					margin-top: 25upx;
					padding: 0 25upx;
					overflow: hidden;
					box-sizing: border-box;
					font-size: 28upx;
					color: #666;
				}

				.type-view {
					padding: 0 25upx;
					box-sizing: border-box;
					max-height: 150upx;

					.list {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;

						.item {
							margin-top: 18upx;
							margin-right: 24upx;
							padding: 0 32upx;
							box-sizing: border-box;
							height: 56upx;
							line-height: 56upx;
							border-radius: 28upx;
							background: #f6f5f5;
							color: #323232;
							font-size: 28upx;

							&.active {
								color: #fb5248;
								background: rgba(251, 82, 72, 0.1);
							}
						}
					}
				}

				.goods-number {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20upx;
					margin-bottom: 120upx;
					padding: 0 25upx;
					box-sizing: border-box;
					height: 88upx;

					text {
						font-size: 28upx;
						color: #666;
					}
				}

				.choose-footer {
					position: absolute;
					bottom: 0;
					width: 100%;
					line-height: 94upx;
					color: $text-color;
					background: $theme-color;
					text-align: center;
					font-size: 34upx;
				}
			}
		}
	}
</style>
